import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import DataSourceSelector from './DataSourceSelector';
import FieldSelector from './FieldSelector';
import HandleField from './HandleField';
import _ from 'lodash';
import {
	getDataSourceList,
	createNode,
	createIndex,
	getNode,
	getListNodes
} from '../../action';

import dataCenter from '../../dataCenter';

const styles = {
	wrapper: {
		height: '100%'
	},
	main: {
		display: 'flex',
		height: 'calc(100% - 100px)',
    paddingTop: 20
	}
}

class NodeCreator extends Component {
	constructor(props) {
		super(props);
		this.state = {
			label: '',
			uri: '',
			originFields: ['card-num', 'id-card'],
			columns: [],
			indexArray: []
		}
	}
	static defaultProps = {
		handleType: 'create'
	}
	componentDidMount() {
		if (this.props.createdNodesList && this.props.createdNodesList.length == 0) {
			this.props.dispatch(getListNodes());
		}
		this.props.dispatch(getDataSourceList());
		const {handleType, id} = this.props;
		if (handleType == 'edit' || handleType =='view') {
			this.props.dispatch(getNode(id, (resp) => {
				const source_uri = resp.source_uri;
				let diviceArray = [];
				for(let i = 0; i < source_uri.length; i++) {
					if (source_uri[i] == '/') {
						diviceArray.push(i);
					}
				};
				const uri = source_uri.substring(diviceArray[diviceArray.length - 2] + 1, diviceArray[diviceArray.length - 1]);
				this.setState({
					label: resp.label,
					uri: uri,
					columns: Object.keys(resp.props).reduce((pre, item) => {
						return [...pre, {columnName: item, columnOtherName: resp.props[item]}]
					}, []),
					indexArray: resp.indexes
				})
			}));
		}
	}
	changeColumnOtherName = (index, value) => {
		this.setState({
			columns: [
				...this.state.columns.slice(0, index),
				Object.assign(this.state.columns[index], {columnOtherName: value}),
				...this.state.columns.slice(index + 1)
			]
		})
	}
	updateState = (newState) => {
		const indexedArray = this.state.indexArray;
		if (Object.keys(newState)[0] === 'columns') {
			const originColumns = this.state.columns.map(item => item.columnName);
			if (newState.columns.length > originColumns.length) {
				const addItems = _.difference(_.uniq([...newState.columns, ...originColumns]), originColumns);
				let addColumns = [{columnName: addItems[0], columnOtherName: ''}];
				this.setState({
					columns: [...this.state.columns, ...addColumns]
				});
			} else if (newState.columns.length < originColumns.length) {
				const delItem = _.difference(_.uniq([...newState.columns, ...originColumns]), newState.columns);
				const index = this.state.columns.findIndex(item => item.columnName === delItem[0]);
				this.setState({
					columns: [...this.state.columns.slice(0, index), ...this.state.columns.slice(index + 1)]
				});
			}
		} else if (Object.keys(newState)[0] === 'uri') {
			this.setState({
				uri: newState.uri,
				columns: [],
				indexArray: []
			})
		} else {
			this.setState(newState);
		}
	}
	changeAddedSource = (record) => {

	}
	createIndexArray = (record) => {
		const {indexArray} = this.state;
		if (indexArray.indexOf(record.columnName) !== -1) {
			this.setState({
				indexArray: _.uniq([...this.state.indexArray.slice(0, indexArray.indexOf(record.columnName)), ...this.state.indexArray.slice(indexArray.indexOf(record.columnName) + 1)])
			})
		} else {
			this.setState({
				indexArray: _.uniq([...this.state.indexArray, record.columnName])
			})
		}
	}
	render() {
		const { dataSourcelist, dispatch, createdNodesList } = this.props;
		const { originFields, label, uri, columns, indexArray } = this.state;
		return (
			<div style={styles.wrapper}>
				<DataSourceSelector handleType={this.props.handleType}
														label={label}
														columns={columns}
														updateState={this.updateState}
														dataSourcelist={dataSourcelist}
														uri={uri}/>
				<div style={styles.main}>
					<FieldSelector handleType={this.props.handleType}
												 originFields={originFields}
												 updateState={this.updateState}
												 dataSourcelist={dataSourcelist}
												 uri={uri}
												 columns={columns}/>
					<HandleField handleType={this.props.handleType}
											 uri={uri}
											 label={label}
											 columns={columns}
											 createIndex={createIndex}
											 createNode={createNode}
											 dispatch={dispatch}
											 indexArray={indexArray}
											 createIndexArray={this.createIndexArray}
											 changeColumnOtherName={this.changeColumnOtherName}
											 changeAddedSource={this.changeAddedSource}
											 getDataSourceList={this.props.getDataSourceList}
											 dataSourcelist={dataSourcelist}
											 createdNodesList={createdNodesList}/>
				</div>
			</div>
		)
	}
}

function mapState2Props(state) {
	let { graphData: {relationships, nodes, dataSourcelist, createdNodesList} } = state;
	return { relationships, nodes, dataSourcelist, createdNodesList };
}

NodeCreator = connect(mapState2Props)(NodeCreator);

export default NodeCreator;
